<template>
	<div class="u-page" style="background:#f7f7f7">
		<section class="aui-flexView">
			<section class="aui-scrollView">
				<div class="aui-order-box">
					<div class="aui-flex aui-flex-default aui-mar15" @click="toTaskDetail">
						<div class="aui-flex-goods">
							<img :src="TaskInfo.Pictures.split(',')[0]" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>{{TaskInfo.Subject}}</h2>
							<!-- <p>简介：{{TaskInfo.Title}}</p> -->
							<div class="aui-tag" v-for="(item, index) in KeyWordList">
								<u-tag :text="item.label" mode="dark" size="mini" bg-color="#7688e8"></u-tag>
							</div>
						</div>
					</div>

					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">推广费用(元)</div>
						<u-input type="number" v-model="TaskInfo.TotalCost" placeholder="请填写金额" @input="getAverageCost">
						</u-input>
					</div>

					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">推广名额(人)</div>
						<u-input type="number" v-model="TaskInfo.TotalQuota" placeholder="请填写参与推广的总人数"
							@input="getAverageCost"></u-input>
					</div>

					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">人均推广费用(元)</div>
						<u-input type="number" disabled="true" v-model="TaskInfo.AverageCost" placeholder="推广费用/推广名额">
						</u-input>
					</div>

					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">推广类别</div>
						<div class="aui-flex-triangle" @click="Industry_Show = true">{{TaskInfo.Industry}}</div>
						<u-picker mode="selector" v-model="Industry_Show" :default-selector="[3]" :range="IndustryRange"
							@confirm="selectIndustry"></u-picker>
					</div>

					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">推广结束时间<span class="u-pl-5">
								<u-icon name="question-circle" top="1" size="30" @click="showTips('EndTime')"></u-icon>
							</span></div>
						<div class="aui-flex-triangle" @click="EndTime_Show = true">
							<span v-if="TaskInfo.EndTime">{{TaskInfo.EndTime}}</span>
							<span v-else>请选择</span>
						</div>
						<u-picker v-model="EndTime_Show" mode="time"
							@confirm="(event) => (TaskInfo.EndTime = `${event.year}-${event.month}-${event.day}`)">
						</u-picker>
					</div>
					<div class="aui-flex aui-choice-white aui-mar15">
						<div class="aui-flex-box">提交推广成果周期(天)<span class="u-pl-5">
								<u-icon name="question-circle" top="1" size="30" @click="showTips('LimitDays')">
								</u-icon>
							</span></div>
						<u-number-box v-model="TaskInfo.LimitDays"></u-number-box>
					</div>

					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">新老用户规则<span class="u-pl-5">
								<u-icon name="question-circle" top="1" size="30" @click="showTips('UserRatio')">
								</u-icon>
							</span></div>
						<div class="aui-flex-triangle" @click="UserRatio_Show = true">{{TaskInfo.UserRatio}}</div>
						<u-picker mode="selector" v-model="UserRatio_Show" :default-selector="[7]"
							:range="UserRatioRange" @confirm="selectUserRatio"></u-picker>
					</div>

					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">自动组队<span class="u-pl-5">
								<u-icon name="question-circle" top="1" size="30" @click="showTips('OrganizeTeam')">
								</u-icon>
							</span></div>
						<div class="aui-flex-triangle" @click="toSelectTeams">
							<span v-if="PrivateTeam.TeamNo">{{PrivateTeam.TeamName}}</span>
							<span v-else>请选择</span>
						</div>
					</div>

					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">验收人员<span class="u-pl-5">
								<u-icon name="question-circle" top="1" size="30" @click="showTips('Rate')"></u-icon>
							</span></div>
						<div class="aui-flex-triangle" @click="toSelectUsers">
							<span>{{Inspector.MemberName}}</span>
						</div>
					</div>

					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">客服人员<span class="u-pl-5">
								<u-icon name="question-circle" top="1" size="30" @click="showTips('CS')"></u-icon>
							</span></div>
						<div class="aui-flex-triangle" @click="CS_Show = true">{{csNameText?csNameText:'请选择'}}</div>
						<!-- <u-picker mode="selector" v-model="CS_Show" :default-selector="[0]" :range="CSRange"
							@confirm="selectCS"></u-picker> -->
						<u-select v-model="CS_Show" :list="CSRange" @confirm="SelectCS"></u-select>
					</div>

				</div>
			</section>

			<div style="height: 30px;"></div>

			<div class="aui-bar-footer">
				<div class="aui-flex">
					<div class="aui-flex-box">
						应付金额：<span>￥{{TaskInfo.TotalCost}}</span>
					</div>
					<div>
						<u-button :disabled="isClick"
							:custom-style="{background:'#f21956',padding:'52rpx 50rpx',color:'#fff',fontSize:'28rpx',borderRadius:'0rpx'}"
							@click="GoToPay">发布任务</u-button>
					</div>
				</div>
			</div>

			<!-- 点击问号弹出提示窗 -->
			<div>
				<u-modal v-model="TipsShow" :content="TipsContent"></u-modal>
			</div>

		</section>

		<!-- 选择支付的方式 -->
		<u-popup v-model="showItem" mode="bottom" @close="closePopup">
			<div class="popup-box">
				<div class="popup-item" v-for="(item, index) in chooseTypes" @click="clickPopup(item)">
					<div>{{item.text}}</div>
				</div>
			</div>
		</u-popup>

	</div>
</template>

<script>
	import globalData from "@/globalData";
	export default {
		data() {
			return {

				TaskInfo: {}, // 任务信息
				KeyWordList: [], // 关键字
				Industry_Show: false, // 推广类别选择弹窗控制
				IndustryRange: [],
				UserRatio_Show: false, //新老用户规则选择弹窗控制
				UserRatioRange: [],
				UserRatio: {},
				CS_Show: false, // 客服选择弹窗控制
				CSRange: [],
				csNameText: '',
				EndTime_Show: false, //评级开始时间选择弹窗控制
				LimitDays_Show: false, // 提交报名的默认时长选择弹窗控制
				isClick: false,
				Inspector: {
					Member: '',
					MemberName: '',
					avatarUrl: ''
				},
				PrivateTeam: {},
				TipsShow: false,
				TipsContent: '',
				UserRatioContent: '选择当前推广任务允许报名的拍档中新注册的拍档与老拍档的比例值。例如：默认比例 3(新):7(老) ，表示：推广名额为100人时，报名的拍档中老拍档最多能占70%(70人)，其余30%(30人)只允许新注册拍档报名。',
				EndTimeContent: '推广任务中最迟的验收成果时间，到此时间推广任务将结束所有验收环节进入财务核算环节。到达该时间，平台会收回已报名但未提交推广成果的拍档，同时会以未验收(作废)来标识已提交推广成果但验收人未按时验收的拍档，最后让该推广任务进入财务核算环节。在财务核算环节，财务将清算此次推广费用是否已用完，未用的将会退还给任务发起人。',
				OrganizeTeamContent: '发起推广任务时允许选择一个已创建的私有团队，来汇聚有兴趣参与并提交推广成果报告的拍档。主要用于组队汇聚志同道合的拍档，以备后续进一步扩大合作。若您在选择私有团队列表中没有找到合适的私有团队，请联系推广任务所在私有场景的拥有者或管理员让其协助建立合适的私有团队。',
				LimitDaysContent: '当拍档报名参与推广任务后，拍档将被要求在此周期(天)内提交第1次推广成果，否则将以过期作废为由收回拍档资格让予其他人。若拍档在临近推广结束时间前报名，且按此周期(天)算出的时间超出推广结束时间，则以推广结束时间为拍档最后提交推广成果的时间，超过该时间未提交推广成果的也将以过期作废为由收回拍档的资格。',
				RateContent: '允许从私有场景的所有拍档储备中，选择一拍档来负责对当前推广的验收和后续评级动作。让采购人只负责采购付款，指定更专业的人做验收和评级。',
				CSContent: '选择一个客服人员来负责对当前推广，为拍档解答疑问，或提供帮补。',
				showItem: false,
				PrivilegedStatus: '', // 是否为支付特权人员。yes:是；no:否。默认：no
				chooseTypes: [{
						text: '全额付款',
						action: 'fullPayment'
					},
					{
						text: '支付0.01元',
						action: 'payALittle'
					},
					{
						text: '取消',
						action: 'closePopup'
					}
				],
			}
		},

		onLoad(options) {

			// 未登录跳转到登录页面
			var loginRes = this.checkLogin()
			if (!loginRes) {
				return false;
			}

			// 初始化数据信息
			let TaskBasicInfo = decodeURIComponent(options.TaskBasicInfo)
			if (this.isNotNull(TaskBasicInfo)) {
				this.TaskInfo = JSON.parse(TaskBasicInfo);
				console.log("任务基本信息TaskInfo=", this.TaskInfo);

				// 渲染标签
				this.KeyWordList = this.RestructuringLabel(this.TaskInfo.KeyWord); // 关键字

			} else {
				this.showMSG('error', '初始化数据出错啦！')
			}

			// 初始化提交推广成果周期，默认值为3
			this.TaskInfo.LimitDays = 3;

			// 获取推广类别
			this.getIndustryRange();

			// 获取新老用户比率
			this.getUserRatio();

			// 获取客服人员列表
			this.getCSRange();

			// 初始化验收人员为任务发起人
			this.initInspector();

			// 根据userid获取支付特权状态
			this.getPrivilegedStatus();

			// 保存选中的验收人员
			uni.$on("saveUserObj", (userObj = {}) => {
				if (JSON.stringify(userObj) == '{}' || Object.keys(userObj).length == 0) {
					this.initInspector()
				} else {
					this.Inspector.Member = userObj.userid
					this.Inspector.MemberName = userObj.nickName
					this.Inspector.avatarUrl = userObj.avatarUrl
				}
				console.log("this.Inspector=", this.Inspector)
			});

			// 保存选中的组队团队列表
			uni.$on("saveTeamList", (teamList = []) => {
				if (teamList.length > 0) {
					this.PrivateTeam = teamList[0]
				} else {
					this.PrivateTeam = {}
				}
			});

		},

		methods: {

			/**
			 * 根据userid获取支付特权状态
			 */
			async getPrivilegedStatus() {
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/user/canQuickPay/" + userInfo.userId,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.PrivilegedStatus = result.data
				}
				/* const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Promote2',
					wf_num: 'R_Promote2_B005',
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.PrivilegedStatus = result.data
				} */
			},

			/**
			 * 初始化验收人员为任务发起人
			 */
			initInspector() {
				// 发起人默认值为当前用户
				this.Inspector.Member = uni.getStorageSync('userInfo').userId
				this.Inspector.MemberName = uni.getStorageSync('userInfo').nickName
				this.Inspector.avatarUrl = uni.getStorageSync('userInfo').avatarUrl
			},

			/**
			 * 获取推广类别（行业）
			 */
			async getIndustryRange() {
				const userInfo = uni.getStorageSync('userInfo');
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Promote2',
					wf_num: 'R_Promote2_B002',
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == "200") {
					this.IndustryRange = result.data
					this.TaskInfo.Industry = this.IndustryRange[3];
				}
			},

			/**
			 * 获取新老用户比率
			 */
			async getUserRatio() {
				const userInfo = uni.getStorageSync('userInfo');
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Promote2',
					wf_num: 'R_Promote2_B003',
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.UserRatioRange = result.data
					this.TaskInfo.UserRatio = this.UserRatioRange[7]
				}
			},

			/**
			 * 获取客服人员列表
			 */
			async getCSRange() {
				const userInfo = uni.getStorageSync('userInfo');
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Promote2',
					wf_num: 'R_Promote2_B006',
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.CSRange = result.data
					this.csNameText = this.CSRange[0].label;
				}
			},

			/**
			 * 选择推广类别
			 */
			selectIndustry($event) {
				this.TaskInfo.Industry = this.IndustryRange[$event]
			},

			/**
			 * 选择新老用户规则
			 */
			selectUserRatio($event) {
				this.TaskInfo.UserRatio = this.UserRatioRange[$event]
			},
			
			/**
			 * 选择客服
			 * @param {Object} e
			 */
			SelectCS(event){
				this.csNameText = event[0].label;
				this.TaskInfo.CSID = event[0].value;
			},

			/**
			 * 计算人均推广费
			 */
			getAverageCost() {

			 let money = this.TaskInfo.TotalCost;
				let people = this.TaskInfo.TotalQuota;

				// 如果推广总金额和参与推广的总人数不为空，则计算 人均推广费
				// 四舍五入保留两位小数toFixed(2)
				// 向下取整Math.floor();
				// 四舍五入Math.round();
				if (this.isNotNull(money) && this.isNotNull(people)) {
					if (money > 0 && people > 0) {
						// 先截取当前数据到小数点后三位 （不会四舍五入）
						let tempVal = this.TaskInfo.AverageCost = (parseFloat(money) / parseFloat(people)).toFixed(3);
						// 再取该数值长度-1的内容
						this.TaskInfo.AverageCost = tempVal.substring(0, tempVal.length - 1)
					}
				}

			},

			/**
			 * 跳转到任务详情
			 */
			toTaskDetail() {
				this.$u.route('/pages_private_scene2/Promote2/SetTask?SceneAssetsId=' + this.TaskInfo.SceneAssetsId +
					'&SceneID=' + this.TaskInfo.SceneID + '&WF_OrUnid=' + this.TaskInfo.ProductID)
			},

			/**
			 * 跳转到选择团队页面
			 */
			toSelectTeams() {
				this.$u.route('/pages_private_scene2/Promote2/common/selectTeams?SceneAssetsId=' + this.TaskInfo
					.SceneAssetsId + '&owner=' + this.TaskInfo.Initiatorid + '&TeamNo=' + this.PrivateTeam.TeamNo +
					'&TeamName=' + this.PrivateTeam.TeamName)
			},

			/**
			 * 跳转到选人页面(单选)
			 */
			toSelectUsers() {
				this.$u.route('/pages_private_scene2/Promote2/common/selectUser?SceneAssetsId=' + this.TaskInfo
					.SceneAssetsId + '&owner=' + this.TaskInfo.Initiatorid + '&limit=1&selectUsers=' + this
					.getUserIdsByCurrent())
			},

			/**
			 * 获取当前成员列表的用户id串，用,隔开
			 */
			getUserIdsByCurrent() {
				let selectUsers = this.Inspector.Member
				return selectUsers
			},

			/**
			 * 前往付款
			 */
			async GoToPay() {

				if (!this.isNotNull(this.TaskInfo.TotalCost)) {
					this.showMSG('none', '请填写推广费用！')
					return
				}

				if (!this.isNotNull(this.TaskInfo.TotalQuota)) {
					this.showMSG('none', '请填写推广名额！')
					return
				}

				if (!this.isNotNull(this.TaskInfo.Industry)) {
					this.showMSG('none', '请选择推广类别！')
					return
				}

				if (!this.isNotNull(this.TaskInfo.EndTime)) {
					this.showMSG('none', '请选择推广结束时间！')
					return
				}

				// 判断是否为后台配置支付特权人员
				if (this.PrivilegedStatus == "yes") {
					this.showItem = true; // 是，则可以选择支付额度
				} else {
					this.doWxPay('fullPayment'); // 否，全额付款
				}

			},

			/**
			 * 选择支付的方式
			 */
			async clickPopup(item) {
				if (item.action == 'fullPayment' || item.action == 'payALittle') {
					this.doWxPay(item.action);
				} else if (item.action == 'closePopup') {
					this.showItem = false
				}
			},

			/**
			 * 关闭 选择支付的方式
			 */
			closePopup() {
				this.showItem = false;
			},

			/**
			 * 支付
			 */
			async doWxPay(action) {

				if (!this.isNotNull(this.TaskInfo.TotalCost)) {
					this.showMSG('error', '应付金额为空，无法支付！');
					return;
				}

				// 显示 loading 提示框
				uni.showLoading({
					mask: true,
				});

				// 设置按钮为不可点击
				this.isClick = true;

				// 0.初始化订单信息
				// 格式化名字（名字超长处理）--- 暂不处理
				let Subject = this.FormatSubject(this.TaskInfo.Subject, 25);

				let name = Subject + "-预存推广费用";
				let price = 0;

				if (action == 'fullPayment') {
					console.log("********全额付款***********");
					price = parseInt(this.TaskInfo.TotalCost) * 100; // 全额付款
				}
				if (action == 'payALittle') {
					console.log("********支付0.01元***********");
					price = 1; // 支付一分钱
				}

				// 定义商品信息串，建议这些字段定义规范并且固定（例如商品件数等数据），好方便订单系统进行展示
				let goodsInfo = {};
				goodsInfo.goodsNum = '1件'; // 件数
				goodsInfo.goodsWeight = '0kg'; // 重量

				// 定义商家信息串，建议这些字段定义规范并且固定（例如下面这两个字段），好方便订单系统进行展示
				let mchInfo = {};
				mchInfo.mchname = ''; // 商家名称
				mchInfo.mchimage = ''; // 商家图标

				let obj = {};
				obj.userid = uni.getStorageSync('userInfo').userId;
				obj.openid = uni.getStorageSync('userInfo').openid;
				obj.tradeDesc = name;
				obj.payPrice = price; // 付款金额
				obj.productID = ''; // 商品编号
				obj.productUrl = ''; // 订单详情页地址
				obj.imageUrl = this.TaskInfo.Pictures.split(',')[0]; // 商品图片
				obj.goodsInfo = goodsInfo;
				obj.mchInfo = mchInfo;
				obj.remark = name;

				// 调用微信支付接口鉴权，返回鉴权信息
				let authinfo = await this.geAuthInfo(obj);
				console.info("支付接口1.authinfo=", authinfo);
				if (authinfo.code != 200) {
					console.log("鉴权失败：" + authinfo);
					this.showMSG('error', '支付失败！');
					this.isClick = false; // 设置按钮为可点击
					return;
				}


				// 调用 小程序支付统一接口，这里是以url判断是哪个接口的
				let url = "/api/unifiedorder";
				let respJson = await this.postWxpayServer(url, obj, authinfo);
				console.info("支付接口2.respJson=", respJson);
				if (respJson.code != 200) {
					console.log("调用小程序支付统一接口失败：" + respJson.msg);
					this.showMSG('error', '支付失败！');
					this.isClick = false; // 设置按钮为可点击
					return;
				}

				// 记录支付订单ID
				this.TaskInfo.OrderId = respJson.data.tradeNo;

				// 开始发起支付动作
				let paymentdata = respJson.data;
				console.log("支付接口3.paymentdata=", paymentdata);

				// hasNext：true表示要发起微信支付，false表示已支付成功
				if (!paymentdata.hasNext) {
					// 0元支付成功（表示写支付记录成功，并未真的进行支付）
					console.log("0元支付成功");
					// 付款成功后，提交流程
					this.placeOrder();
					return;
				}

				// 开始发起支付动作，进入到这里表示 hasNext = true，需要调用发起微信支付*/
				let that = this;
				wx.requestPayment({
					...paymentdata,
					success(res) {
						// 此处只能返回通信成功，返回的并不是支付成功，只能在complete中进行业务处理
						console.log("支付成功", res);
					},
					fail(err) {
						console.log("支付失败", err);
						// that.showMSG('error', '支付失败！');
						this.showItem = false; // 关闭 选择支付的方式
						that.isClick = false; // 设置按钮为可点击
					},
					complete(res) {
						/**
						 * 延时查询订单是否支付成功；
						 * 1.支付成功，则提交流程
						 * 2.支付未成功，则弹窗提示(再执行一次支付，实际上是执行订单查询)
						 */
						setTimeout(() => {
							// 查询订单是否支付成功
							that.doQueryWxPayOk('first');
						}, 1500);
					}
				});
			},

			/**
			 * 查询订单是否支付成功
			 */
			async doQueryWxPayOk(action) {
				let obj = {};
				obj.userid = uni.getStorageSync('userInfo').userId;
				obj.openid = uni.getStorageSync('userInfo').openid;
				obj.tradeNo = this.TaskInfo.OrderId; // 交易成功的商户订单号
				let authinfo = await this.geAuthInfo(obj);
				console.info("查询订单是否支付成功接口1.authinfo=", authinfo);
				if (authinfo.code != 200) {
					console.log("鉴权失败：" + authinfo);
					this.showMSG('error', '支付失败！');
					this.isClick = false; // 设置按钮为可点击
					return;
				}
				// 调用 查询小程序支付订单是否支付成功，这里是以url判断是哪个接口的
				let url = "api/queryorderok";
				let respJson = await this.postWxpayServer(url, obj, authinfo);
				console.info("查询订单是否支付成功接口2.respJson=", respJson);
				if (respJson.code != 200) {
					console.log(action + "调用查询小程序支付订单是否支付成功失败：", respJson.msg);
					// 第一次调用
					if (action == 'first') {
						// 显示再调用一次的弹窗
						this.showPayInfo = true;
					}
					// 第二次调用
					if (action == 'second') {
						this.showMSG('error', '支付失败！');
						this.isClick = false; // 设置按钮为可点击
					}

				} else {
					// 付款成功后，发布任务
					this.PublishTask();
				}
			},


			/**
			 * 发布任务
			 */
			async PublishTask() {

				// 验收人员
				this.TaskInfo.Inspectorid = this.Inspector.Member
				this.TaskInfo.InspectorName = this.Inspector.MemberName

				// 私有团队编号
				if (this.isNotNull(this.PrivateTeam.TeamNo)) {
					this.TaskInfo.PrivateTeamNo = this.PrivateTeam.TeamNo
				} else {
				 this.TaskInfo.PrivateTeamNo = ''
				}

				// 客服人员处理。只取id部分
				this.TaskInfo.CSID = this.TaskInfo.CSID.split("(")[0];

				console.log("发布任务TaskInfo=", this.TaskInfo);

				const userInfo = uni.getStorageSync('userInfo');
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Promote2',
					wf_num: 'R_Promote2_BL003',
					WF_formData: this.TaskInfo,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					uni.hideLoading();
					uni.reLaunch({
						url: '/pages_private_scene2/Promote2/common/result?mode=1&Subject=' + this.TaskInfo
							.Subject + '&MainDocUnid=' + this.TaskInfo.docUnid
					});
				}
			},

			/**
			 * 格式化订单名字（名字超长处理）
			 * name：需要处理的字段
			 * MaxLength：要保留的最大长度，包含...
			 */
			FormatSubject(name, MaxLength) {
				let cutName = "";
				if (name.length > MaxLength) {
					// 超出的长度，需要截取
					let cutLength = name.length - (name.length - MaxLength) - 3; // 3表示三个省略号的长度
					cutName = name.substring(0, cutLength) + "...";
				} else {
					cutName = name;
				}
				return cutName;
			},
			
			/**
			 * 点击问号提示
			 */
			showTips(type) {
				if (type == 'UserRatio') {
					this.TipsContent = this.UserRatioContent
					this.TipsShow = true
				} else if (type == 'EndTime') {
					this.TipsContent = this.EndTimeContent
					this.TipsShow = true
				} else if (type == 'LimitDays') {
					this.TipsContent = this.LimitDaysContent
					this.TipsShow = true
				} else if (type == 'OrganizeTeam') {
					this.TipsContent = this.OrganizeTeamContent
					this.TipsShow = true
				} else if (type == 'Rate') {
					this.TipsContent = this.RateContent
					this.TipsShow = true
				} else if (type == 'CS') {
					this.TipsContent = this.CSContent
					this.TipsShow = true
				}
			}

		}
	}
</script>

<style scoped>
	aui-flexView {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.aui-scrollView {
		width: 100%;
		height: 100%;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		position: relative;
		margin-top: 0;
	}

	.aui-navBar {
		height: 44px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		z-index: 1002;
		background: #f7f7f7;
	}

	.b-line {
		position: relative;
	}

	.b-line:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #e2e2e2;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.aui-navBar-item {
		height: 44px;
		min-width: 25%;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 25%;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		padding: 0 0.9rem;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		font-size: 0.7rem;
		white-space: nowrap;
		overflow: hidden;
		color: #353535;
		position: relative;
	}

	.aui-navBar-item:first-child {
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		-ms-flex-order: 1;
		order: 1;
		margin-right: -25%;
		font-size: 0.9rem;
		font-weight: bold;
	}

	.aui-navBar-item:last-child {
		-webkit-box-ordinal-group: 4;
		-webkit-order: 3;
		-ms-flex-order: 3;
		order: 3;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}

	.aui-center {
		-webkit-box-ordinal-group: 3;
		-webkit-order: 2;
		-ms-flex-order: 2;
		order: 2;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		height: 44px;
		width: 50%;
		margin-left: 25%;
	}

	.aui-center-title {
		text-align: center;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		text-overflow: ellipsis;
		font-size: 0.95rem;
		color: #333;
	}

	.icon {
		width: 20px;
		height: 20px;
		display: block;
		border: none;
		float: left;
		background-size: 20px;
		background-repeat: no-repeat;
	}

	.aui-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 15px;
		position: relative;
	}

	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		font-size: 14px;
		color: #333;
	}

	.aui-flex-triangle {
		position: relative;
		font-size: 14px;
		padding-right: 15px;
	}

	.aui-flex-triangle:before {
		content: '';
		width: 0;
		height: 0;
		border-width: 5px 0px 5px 8px;
		border-style: solid;
		border-color: transparent transparent transparent #7b7b7b;
		position: absolute;
		top: 6px;
		right: 0;
		border-radius: 1;
	}

	.aui-choice-white {
		background: #fff;
	}

	.aui-order-box {
		padding: 10px 20px;
	}

	.aui-flex-goods {
		margin-right: .8em;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
	}

	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
	}

	.aui-flex-default {
		background: #f3f1f1;
	}

	.aui-flex-default h2 {
		font-size: 14px;
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-wrap: normal;
		word-wrap: break-word;
		word-break: break-all;
		padding-bottom: 5px;
	}

	.aui-flex-default p {
		color: #999999;
		font-size: 12px;
	}

	.aui-flex-clear {
		padding: 0;
		margin-top: 20px;
	}

	.aui-flex-clear .aui-flex-box {
		color: #f21956;
		font-weight: bold;
	}

	.aui-mar15 {
		margin-bottom: 15px;
	}

	.aui-flex-triangle-clear:before {
		border-color: #fff;
	}

	.aui-flex-box h2 {
		font-size: 16px;
		padding-bottom: 5px;
	}

	.aui-flex-box h3 {
		font-size: 14px;
		padding-bottom: 5px;
	}

	.aui-flex-box p {
		padding-top: 5px;
		font-size: 12px;
		color: #999;
		line-height: 1.2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.aui-bar-footer {
		line-height: 52px;
		height: 52px;
		background: #fff;
		box-shadow: 0 -2px 10px #ddd;
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.aui-btn-button {
		background: #f21956;
		padding: 0 25px;
		color: #fff;
		font-size: 14px;
	}

	.aui-bar-footer .aui-flex {
		padding: 0;
	}

	.aui-bar-footer .aui-flex-box {
		padding-left: 15px;
	}

	.aui-bar-footer .aui-flex-box span {
		font-style: normal;
		color: #f21956;
	}

	.cnt {
		padding-top: 1px;
		color: #e61111;
		position: relative;
		line-height: 22px;
		font-size: 14px;
		font-weight: 500;
	}

	.aui-tag {
		display: inline
	}

	.popup-box {
		padding-bottom: 50rpx;
		padding-top: 50rpx;
	}

	.popup-item {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 33rpx;
	}
</style>
